<template>
  <div class="article">
    <SearchCard @search="searchArticles" @add="$router.push('/article/create')" :options="tagList" tip="文章" select="标签" needAdd="true"></SearchCard>

    <el-card class="app-container">
      <el-table v-loading="loading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="文章描述：">
                <span>{{ props.row.description }}</span>
              </el-form-item>
              <el-form-item label="SEO关键字：">
                <span>{{ props.row.seo }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="文章标题" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column label="文章图片" width="200" align="center">
          <template slot-scope="scope">
            <img v-if="scope.row.img" :src="$cloud + scope.row.img" width="180" height="80" alt="">
            <el-empty v-else description="暂无图片"></el-empty>
          </template>
        </el-table-column>
        <el-table-column label="标签" align="center">
          <template slot-scope="scope">
            <p v-for="(item, index) in scope.row.tags" :key="index">{{ item.name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createdAt }}
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            {{ scope.row.sort }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
                scope.row.status | statusFilterText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="180" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id, scope.row.title)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background :current-page.sync="page" layout="total, prev, pager, next" :total="count" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import SearchCard from './common/SearchCard'
export default {
  name: 'ArticleList',
  components: {
    SearchCard,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
      }
      return statusMap[status]
    },
    statusFilterText(status) {
      const statusMap = {
        0: '隐藏',
        1: '正常',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      loading: true,
      tagList: [],
      list: [],
      count: 0,
      page: 1,
      size: 10,
      searchForm: {
        id: '',
        title: '',
        status: '',
        tagId: '',
      },
    }
  },
  created() {
    this.getArticleList(1, 10)
    this.getTagList()
  },
  methods: {
    // 自定义表格索引
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
    },
    // 搜索
    searchArticles(content) {
      this.loading = true
      let params = content
      if (content.option) params.tagId = content.option
      params.page = this.page
      params.size = this.size

      this.$api.httpArticleSearch(params).then((res) => {
        if (res.code === 200) {
          this.list = res.data.rows || []
          this.count = res.data.meta.count
          this.loading = false
        }
      })
    },
    // 获取标签列表
    getTagList() {
      this.$api.httpTagList().then((res) => {
        if (res.code === 200) {
          this.tagList = res.data
        }
      })
    },
    // 获取文章列表
    getArticleList(page, size) {
      this.loading = true
      this.$api.httpArticleList({ page, size }).then((res) => {
        if (res.code === 200) {
          this.list = res.data.rows || []
          this.count = res.data.meta.count
          this.loading = false
        }
      })
    },
    // 文章编辑
    handleEdit(id) {
      this.$router.push('/article/edit?id=' + id)
    },
    // 删除文章
    handleDelete(id, title) {
      this.$confirm(`是否删除文章 《${title}》 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.httpArticleDetele(id).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.getArticleList()
            }
          })
        })
        .catch(() => { })
    },
    // 点击页码
    handleCurrentChange(page) {
      this.getArticleList(page)
    },
  },
}
</script>

<style scoped lang="scss">
  // 表格展开行内边距
::v-deep .el-table__cell{
  padding: 12px!important;
}

.el-empty {
  height: 80px;
}
::v-deep .el-empty__image {
  width: 40px !important;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.articlez {
  box-sizing: border-box;
}

.search {
  margin-bottom: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
